<!DOCTYPE html>
<html>

<head>
  <title>Wire-Pod</title>
  <!-- Meta Apple tags for a PWA like experience. -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="default">
  <meta name="theme-color" content="#1e1e1e">
  <link rel="stylesheet" type="text/css" href="css/style.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
  <script src="https://kit.fontawesome.com/7508f396ac.js" crossorigin="anonymous"></script>
  <meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate, max-age=0">
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Expires" content="Thu, 01 Jan 1970 00:00:00 GMT">
</head>

<body>
  <div id="outer">
    <div id="content" class="">
      <h1>Wire-Pod</h1>
      <!-- Bot stats, connected and battery -->
      <div id="botStats"></div>
      <hr />

      <div class="main-nav-parent">
        <!--WP settings-->
        <div class="main-nav-child">
          <a href="setup.html"><i class="fa-solid fa-gear"></i><br />Server Settings</a>
        </div>
        <!--Bot Settings-->
        <div class="main-nav-child">
          <a href="/sdkapp"><i class="fa solid fa-toolbox"></i><br />Bot Settings</a>
        </div>
        <!--Bot Setup-->
        <div class="main-nav-child">
          <a href="#" onclick="showBotAuth(); return false;"><i class="fa solid fa-robot" id="icon-BotAuth"
              name="icon"></i><br />Bot Setup</a>
        </div>
        <!--Custom Intents-->
        <div class="main-nav-child">
          <a href="#" onclick="showIntents(); return false;"><i class="fa-solid fa-microphone-lines" id="icon-Intents"
              name="icon"></i><br />Custom Intents</a>
        </div>
        <!--Logs-->
        <div class="main-nav-child">
          <a href="#" onclick="showLog(); return false;"><i class="fa-solid fa-file-lines" id="icon-Logs"
              name="icon"></i><br />Log</a>
        </div>
        <!--Version-->
        <div class="main-nav-child">
          <a href="#" onclick="showVersion(); return false;"><i class="fa-solid fa-code-compare" id="icon-Version"
              name="icon"></i><br />Version Info</a>
        </div>
        <!--UI Customizer-->
        <div class="main-nav-child">
          <a href="#" onclick="showUICustomizer(); return false;"><i class="fa-solid fa-pen-nib" id="icon-Customizer"
              name="icon"></i><br />UI Settings</a>
        </div>
      </div>
      <hr />

      <div id="section-intents" style="display: none">
        <h2 id="foldable-add" onclick="toggleSection('content-add', 'content-edit')">
          <span>+</span>
          Add a custom intent
        </h2>
        <div class="content" id="content-add">
          <p>
            For more details, see
            <a href="https://github.com/kercre123/wire-pod/wiki/Custom-Intents" target="_blank">the Custom Intents page of the wiki</a>
          </p>
          <div id="addIntentStatus"></div>
          <form id="intentAddForm">
            <label for="nameAdd">Custom intent name:</label>
            <input type="text" name="nameAdd" id="nameAdd" /><br />
            <label for="descriptionAdd">Custom intent description:</label>
            <input type="text" name="descriptionAdd" id="descriptionAdd" /><br />
            <label for="utterancesAdd">Utterances that will trigger the intent (separated by
              ,):</label>
            <input type="text" name="utterancesAdd" id="utterancesAdd" /><br />
            <div id="intentAddSelect"></div>
            <label for="paramnameAdd">Intent parameter name (not required):</label>
            <input type="text" name="paramnameAdd" id="paramnameAdd" /><br />
            <label for="paramvalueAdd">Intent parameter value (not required):</label>
            <input type="text" name="paramvalueAdd" id="paramvalueAdd" /><br />
            <label for="execAdd">Path to script/program to execute after sending intent (not
              required):</label>
            <input type="text" name="execAdd" id="execAdd" /><br />
            <label for="execAdd">Arguments for script/program (seperated by ,) (not required):</label>
            <input type="text" name="execAddArgs" id="execAddArgs" size="50" /><br />
            <label for="luaAdd">Lua code to run (not required):</label>
            <textarea id="luaAdd"></textarea>
          </form>
          <div>
            <button onclick="sendIntentAdd()">Add intent</button>
          </div>
          <hr />
        </div>

        <h2 id="foldable-edit" onclick="toggleSection('content-edit', 'content-add')">
          <span>+</span>
          Edit/delete a custom intent
        </h2>
        <div class="content" id="content-edit">
          <div id="editSelect"></div>
          <div id="editIntentStatus"></div>
          <div id="deleteIntentStatus"></div>
          <div>
            <div>
              <button onclick="editFormCreate()">Edit selected intent</button>
              <button onclick="deleteSelectedIntent()">
                Delete selected intent
              </button>
            </div>
          </div>
          <div id="editIntentForm"></div>
          <hr />
        </div>
      </div>

      <div id="section-botauth" style="display: none">
        <h2>Authentication</h2>
        <hr class="small-hr">
        <div>
          <div id="disconnectButton"></div>
        </div>
        <div>
          <div id="botAuth"></div>
        </div>
        <hr />
        <div>
          <h3>Configure an OSKR/dev-unlocked robot</h3>
          <hr class="small-hr">
          <small class="desc">Works with firmware 1.4 and above.</small>
          <div id="oskrSetupProgress"></div>
          <div id="oskrSetup">
            <p><b>If you have an OSKR/dev-unlocked bot;</b> enter the bot's IP
              address and upload the bot's SSH key here, then click "Set up
              bot". After that, use the above section to finish setting up
              your bot.</p>
            <hr class="small-hr">
            <input class="tinput" type="text" id="sshIp" name="sshIp" placeholder="Bot IP address" /><br />
            <input type="file" id="sshKeyFile" name="sshKeyFile" /><br />
            <hr class="small-hr">
            <button onclick="doSSHSetup()">Set up bot</button>
          </div>
        </div>
        <hr />
      </div>

      <div id="section-log" style="display: none">
        <h2>Log</h2>
        <hr class="small-hr">
        <div class="center">
          <div style="text-align:left">
            <input id="logdebug" name="logdebug" type="checkbox" />
            <label class="checkbox-label" for="logdebug">Show all logs</label><br />
            <input id="logscrollbottom" name="logscrollbottom" type="checkbox" />
            <label class="checkbox-label" for="logscrollbottom">Scroll to bottom</label>
          </div>
        </div>
        <textarea id="botTranscriptedTextArea" rows="7" cols="50">
          loading log...
        </textarea>
        <hr class="log-hr" />
      </div>

      <div id="section-version" style="display: none">
        <h2>Version</h2>
        <hr class="small-hr">
        <div id="versionDiv">
          <button onclick="checkUpdate()">
            Check For Update
          </button>
          <hr class="small-hr">
          <p id="cVersion"></p>
          <small class="desc" style="display: none;" id="cCommit"></small>
          <p id="aUpdate"></p>
          <a id="updateGuideLink" style="display: none" target="_blank"
            href="https://github.com/kercre123/wire-pod/wiki/Things-to-Know#updating-wire-pod">Update Guide</a>
        </div>
        <hr />
      </div>

      <div id="section-uicustomizer" style="display: none">
        <h2>UI Customizer</h2>
        <hr class="small-hr">
        <p>Accent Color</p>
        <select onchange="setUIColor()" id="accent-color-choose">
          <option value="teal" selected="selected">Teal (default)</option>
          <option value="orange">Orange</option>
          <option value="yellow">Yellow</option>
          <option value="lime">Lime</option>
          <option value="sapphire">Sapphire</option>
          <option value="purple">Purple</option>
          <option value="green">Green</option>
        </select>
        <hr class="small-hr">
        <p>Body Font</p>
        <select onchange="setUIFont()" id="body-font-choose">
          <option style="font-family: 'DroidSans';" value="droidsans" selected="selected">Droid Sans (default)</option>
          <option style="font-family: 'IBMVGA';" value="ibmvga">IBM VGA 8x16 (retro)</option>
        </select>
        <hr />
      </div>

    </div>
  </div>
</body>

<script src="./js/main.js"></script>
<script src="./js/ble.js"></script>
<script src="./js/ssh.js"></script>
<script src="./js/ui.js"></script>
<script src="./sdkapp/js/common.js"></script>
<script src="./js/battery.js"></script>
<!-- <script src="./sdkapp/js/main.js"></script> -->
<script>
  checkInited();
  updateIntentSelection("editSelect");
  updateIntentSelection("deleteSelect");
  createIntentSelect("intentAddSelect");
  processBotStats();
</script>

</html>
